<template>
    <el-dialog v-model="dialogVisible" :title="title" width="400px" destroy-on-close :close-on-click-modal="false">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="">
                <template v-for="(i, index) in formData" :key="index">
                    <el-form-item v-if="!i.hide" :label="i.label" :prop="`${index}.value`" class="bold fc-main">
                        <el-radio-group v-if="i.type === 'radioList'" v-model="i.value" size="large" :disabled="i.disabled"
                            @change="i.handleChange(i)">
                            <el-radio v-for="(item, idx) in i.options" :key="idx" :label="item[i.defaultAttrs.value]">
                                {{ item[i.defaultAttrs.label] }}
                            </el-radio>
                        </el-radio-group>

                        <el-select v-if="i.type === 'inputSelect'" v-model="i.value" filterable remote remote-show-suffix
                            placeholder="请输入" class="w-full" @focus="i.handleFocus && i.handleFocus(i)"
                            :remote-method="(val: any) => i.remoteMethod(val, i)" :loading="i.loading"
                            :disabled="i.disabled">
                            <el-option v-for="(item, idx) in i.options" :key="idx" :label="item[i.defaultAttrs.label]"
                                :value="item[i.defaultAttrs.label]" />
                        </el-select>
                        <!-- 
                        <el-select v-if="i.type === 'inputSelect'" v-model="i.value" filterable remote remote-show-suffix
                            placeholder="请输入" class="w-full" :remote-method="(val) => i.remoteMethod(val, i)"
                            :loading="i.loading">
                            <el-option v-for="(item, idx) in i.options" :key="idx" :label="item[i.defaultAttrs.label]"
                                :value="item[i.defaultAttrs.label]" />
                        </el-select> -->
                        <el-input v-if="i.type === 'input'" v-model="i.value" :type="i.inputType || 'text'"
                            :placeholder="i.placeholder" :disabled="i.disabled" />
                    </el-form-item>
                </template>
            </el-form>
            <div class="flex items-center set-margin">
                <div class="fc-primary fs-16 flex items-center"><el-icon>
                        <Upload />
                    </el-icon>上传附件</div>
                <div class="fc-lightgrey mg-l-20">大小限制为5M</div>
            </div>
            <div class="mg-t-20">
                <uploadImage v-model:base64-file="formData.file.value" :file-url="formData.file.valueUrl" />
            </div>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { getCompanyByName, longTermCompanyList, dayCompanyList, addBlackList, updateBlackList } from 'api/tools/blackList.ts'
import { ElMessage } from 'element-plus'
import uploadImage from '../uploadImage/index.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    // 新增 ： add  编辑  update
    type: {
        type: String,
        default: 'add'
    },
    curItem: {
        type: Object
    },
    curTab: {
        type: Number
    }
})

const emits = defineEmits(['update:show', 'success'])

const dialogVisible = ref(false)

const title = computed(() => {
    return props.type === 'add' ? '新增黑名单' : '修改黑名单'
})

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval) {
        const disabeldList = ['type', 'productType', 'customerName', 'companyName', 'userName', 'idCardNo']
        disabeldList.forEach(prop => {
            formData.value[prop].disabled = props.type === 'update'
        })
        formData.value.type.value = props.curTab
        formData.value.type.handleChange(formData.value.type)
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
    if (!newval) {
        formRef.value.resetFields()
    }
})


const formData = ref<any>({
    type: {
        label: '类别',
        prop: 'type',
        type: 'radioList',
        options: [
            {
                label: '客户',
                value: 0
            },
            {
                label: '派遣单位',
                value: 1
            },
            {
                label: '投保人员',
                value: 2
            },
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: 0,
        disabled: false,
        handleChange: (item: any) => {
            console.log(1111, item)
            switch (item.value) {
                case 0:
                    formData.value.customerName.hide = false
                    formData.value.companyName.hide = true
                    formData.value.userName.hide = true
                    formData.value.idCardNo.hide = true
                    formData.value.productType.hide = false
                    formData.value.isRetainReportCaseUser.hide = false
                    break
                case 1:
                    formData.value.customerName.hide = true
                    formData.value.companyName.hide = false
                    formData.value.userName.hide = true
                    formData.value.idCardNo.hide = true
                    formData.value.productType.hide = false
                    formData.value.isRetainReportCaseUser.hide = false
                    break
                case 2:
                    formData.value.customerName.hide = true
                    formData.value.companyName.hide = true
                    formData.value.userName.hide = false
                    formData.value.idCardNo.hide = false
                    formData.value.productType.hide = true
                    formData.value.isRetainReportCaseUser.hide = true
                    break
            }
        }
    },
    productType: {
        label: '产品类型',
        prop: 'productType',
        type: 'radioList',
        options: [
            {
                label: '长期保',
                value: 1
            },
            {
                label: '日日保',
                value: 0
            }
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: '',
        disabled: false,
        handleChange: (item: any) => {
            formData.value.companyName.options = []
            // switch (item.value) {
            //     case 1:
            //         formData.value.customerName.hide = false
            //         formData.value.companyName.hide = true
            //         formData.value.name.hide = true
            //         formData.value.id.hide = true
            //         break
            //     case 2:
            //         formData.value.customerName.hide = true
            //         formData.value.companyName.hide = false
            //         formData.value.name.hide = true
            //         formData.value.id.hide = true
            //         break
            //     case 3:
            //         formData.value.customerName.hide = true
            //         formData.value.companyName.hide = true
            //         formData.value.name.hide = false
            //         formData.value.id.hide = false
            //         break
            // }
            // console.log(1111, formData.value);
        }
    },
    isRetainReportCaseUser: {
        label: '拉黑后是否保留出险人员',
        prop: 'isRetainReportCaseUser',
        type: 'radioList',
        options: [
            {
                label: '保留',
                value: 1
            },
            {
                label: '不保留',
                value: 0
            }
        ],
        defaultAttrs: {
            label: 'label',
            value: 'value'
        },
        value: '',
        disabled: false,
        handleChange: (item: any) => {
            formData.value.companyName.options = []
        }
    },
    customerName: {
        label: '客户名称',
        prop: 'name',
        type: 'inputSelect',
        placeholder: '请输入',
        inputType: 'text',
        value: '',
        disabled: false,
        loading: false,
        options: [],
        defaultAttrs: {
            label: 'companyName',
            value: 'companyName'
        },
        hide: false,
        remoteMethod: (val: any, item: any) => {
            if (!val.trim()) return
            getCompanyByName({
                companyName: val.trim(),
                auditStatus: 1
            }).then((res: any) => {
                item.options = res
            })
        },
    },
    companyName: {
        label: '派遣单位名称',
        prop: 'name',
        type: 'inputSelect',
        placeholder: '请输入',
        inputType: 'text',
        value: '',
        disabled: false,
        loading: false,
        options: [],
        defaultAttrs: {
            label: 'serveCompanyName',
            value: 'serveCompanyName'
        },
        hide: true,
        remoteMethod: (val: any, item: any) => {
            if (!formData.value.productType.value && formData.value.productType.value !== 0) {
                ElMessage({
                    message: '请先选择产品类型',
                    type: 'warning'
                })
                return
            }
            if (formData.value.productType.value === 0) {
                if (!val.trim()) return
                dayCompanyList({
                    insureCompanyType: 'insure002_gsc', //固定值
                    serveCompanyName: val.trim(),
                    isOpenWesure: 1, //固定值
                    auditStatus: 1, //固定值
                }).then((res: any) => {
                    item.options = res
                })
            } else if (formData.value.productType.value === 1) {
                if (!val.trim()) return
                longTermCompanyList({
                    serveCompanyName: val.trim(),
                    status: 1
                }).then((res: any) => {
                    item.options = res
                })
            }
        }
    },
    userName: {
        label: '姓名',
        prop: 'name',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: '',
        disabled: false,
        hide: true
    },
    idCardNo: {
        label: '身份证号',
        prop: 'idCardNo',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: '',
        disabled: false,
        hide: true
    },
    reason: {
        label: '录入原因',
        prop: 'reason',
        type: 'input',
        placeholder: '请输入',
        inputType: 'text',
        value: '',
    },
    file: {
        prop: 'file',
        value: null,
        valueUrl: ''
    }
})

const rules = ref({
    'type.value': [
        {
            required: true,
            trigger: 'change',
            message: '类型不能为空'
        }
    ],
    'productType.value': [
        {
            required: true,
            trigger: 'change',
            message: '请选择产品类型'
        }
    ],
    'isRetainReportCaseUser.value': [
        {
            required: true,
            trigger: 'change',
            message: '请选择拉黑后是否保留出险人员'
        }
    ],
    'customerName.value': [
        {
            required: true,
            trigger: 'change',
            message: '客户名称不能为空'
        }
    ],
    'companyName.value': [
        {
            required: true,
            trigger: 'change',
            message: '派遣单位名称不能为空'
        }
    ],
    'userName.value': [
        {
            required: true,
            trigger: 'blur',
            message: '姓名不能为空'
        }
    ],
    'idCardNo.value': [
        {
            required: true,
            trigger: 'blur',
            message: '身份证号不能为空'
        }
    ],
    'reason.value': [
        {
            required: true,
            trigger: 'blur',
            message: '录入原因不能为空',
        }
    ],
})

const getQueryData = () => {
    const data = {}
    for (const key in formData.value) {
        if (!formData.value[key].hide) {
            data[formData.value[key].prop] = formData.value[key].value
        }
    }
    if (props.type === 'update') {
        data.id = props.curItem.id
    }
    return data
}

const formRef = ref<any>(null)

const submit = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            if (props.type === 'add') {
                addBlack()
            } else {
                updateBlack()
            }
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const addBlack = () => {
    addBlackList({
        ...getQueryData()
    }).then(res => {
        ElMessage({
            message: '新增成功',
            type: 'success'
        })
        emits('success')
        dialogVisible.value = false
    })
}

const updateBlack = () => {
    updateBlackList({
        ...getQueryData()
    }).then(res => {
        ElMessage({
            message: '更新成功',
            type: 'success'
        })
        emits('success')
        dialogVisible.value = false
    })
}

watch(() => props.curItem, (newval) => {
    console.log(newval, 'newvalnewvalnewval')
    
    if (props.type === 'update') {
        formData.value.isRetainReportCaseUser.hide = true
        for (const key in formData.value) {
            if (key === 'type') {

            } else if (key === 'productType') {
                // 0:日保被派遣单位,1:日保客户,2:长期保被派遣单位,3:长期保客户,4:人员
                switch (newval.type) {
                    case 0:
                        formData.value.type.value = 1
                        formData.value.productType.value = 0
                        break
                    case 1:
                        formData.value.type.value = 0
                        formData.value.productType.value = 0
                        break
                    case 2:
                        formData.value.type.value = 1
                        formData.value.productType.value = 1
                        break
                    case 3:
                        formData.value.type.value = 0
                        formData.value.productType.value = 1
                        break
                    case 4:
                        formData.value.type.value = 2
                        formData.value.productType.hide = true
                        break
                }
            } else {
                formData.value[key].value = newval[formData.value[key].prop]
                formData.value.file.valueUrl = newval.fileUrl
            }
        }
    }
}, {
    immediate: true,
    deep: true
})
</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}

.set-margin {
    margin-top: -20px;
}</style>